<template>
  <div class="header-wrapper">
    <div class="headernav wrap">
      <div class="logo"></div>
      <div class="nav-main">
        <div class="nav-item">
          <RouterLink active-class="active" to="/home">首页</RouterLink>
        </div>
        <div class="nav-item">
          <RouterLink active-class="active" to="/meeting">大会议程</RouterLink>
        </div>
        <div class="nav-item">
          <RouterLink active-class="active" to="/about">关于大会</RouterLink>
        </div>
        <div class="nav-item">
          <RouterLink active-class="active" to="/expert">大咖云集</RouterLink>
        </div>
        <div class="nav-item">
          <RouterLink active-class="active" to="/wonderful_activity"
            >精彩活动</RouterLink
          >
        </div>
        <div class="nav-item">
          <RouterLink active-class="active" to="/exhibitor"
            >展商风采</RouterLink
          >
        </div>

        <div class="nav-item">
          <RouterLink active-class="active" to="/results">成果发布</RouterLink>
        </div>
        <div class="nav-item">
          <RouterLink active-class="active" to="/news">媒体中心</RouterLink>
        </div>
        <div class="nav-item">
          <RouterLink active-class="active" to="/guide">参会指南</RouterLink>
        </div>
        <div class="nav-item">
          <RouterLink active-class="active" to="/agenda_live">大会直播</RouterLink
          >
        </div>

        <div class="nav-item login">
          <RouterLink to="/user">个人中心</RouterLink> | 退出
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>
<script setup>
import { RouterLink } from "vue-router";
</script>
<style scoped lang="scss">
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.wrap {
  width: 1460px;
  margin: 0 auto;
}
.header-wrapper {
  width: 100%;
  height: 105px;
  position: fixed;
  z-index: 100;
  top: 0px;
  background: white;
  border-bottom: 1px solid rgb(220, 220, 220);
}
.headernav {
  width: 1600px;
  height: 105px;
  display: flex;
}

.logo {
  width: 260px;
  height: 105px;
  margin-right: 225px;
  background-color: pink;
  background: url(../assets/logo.png) center no-repeat;
  background-size: contain;
}
.headernav .nav-main {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  /* background-color: aqua; */
}
.nav-item.login {
  color: #999;
  font-size: 14px;
}
.nav-item:hover {
  color: rgba(28, 108, 182);
}
.active {
  color: #6495ed;
}
</style>
